<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Мой валидатор формы.</title>

        <link rel="stylesheet" type="text/css" href="/scripts/dijit/themes/tundra/tundra.css" />
        <link href="/scripts/css/myvalidate.css" rel="stylesheet" type="text/css" />
        
        <script type="text/javascript">
        var djConfig = {
	        isDebug:true,
            parseOnLoad:true};

        </script>
        <script  type="text/javascript" src="/scripts/dojo/dojo.js"></script>


        <script type="text/javascript">
            dojo.addOnLoad(function() {
                //Attach the plugin
                dojo.require("dojo.app.myvalidator.myvalidate");

                //Init global options
                var globalOptions = {bindedElement :  dojo.query("#forma"),
                                     triggeredEvents: ["submit"],
                                     processors : [{method:'notEmpty'}],
                                     errorFunction   : "list"};

                //Validators that will be used by plugin
                var validatorStack = ['notEmpty', 'minLength', 'maxLength', 
                                      'regExp', 'rangeLength', 'required',
                                      'equal', 'rangeValue', 'email',
                                      'remoteUrl'];

                //Functions that show errors of validation
                var errorMessageShowFunctionStack = ['list', 'popup'];

                //Attach the validator class and init options
                //You can specifies the locale used by plugin (default "en")
                var validator = new dojo.app.myvalidator.myvalidate(
                    globalOptions,
                    validatorStack,
                    errorMessageShowFunctionStack, 
                    "ru"
                );


                //And now specifies the form fields and its validation options
                var options1 = {bindedElement   : dojo.query("#two"),
                                triggeredEvents : ['keyup'],
                                processors : [{method          : 'minLength',
                                               validationValue : 3,
                                               messages        : {'en':'Error with %value%. 3 characters are required!',
                                                                  'ru':'Ошибка в %value%. Необходимо минимум 3 символа!'}},
                                               {method         : 'notEmpty'},
                                               {method         : 'regExp',
                                                validationValue: /^[0-9]+$/}
                                             ]
                               };
                //triggeredEvents and bindedElement from globalOptions
                var options2 = {processors : [{method         : 'maxLength',
                                               validationValue: 6}
                                             ]
                               };

                //errorFunction - popup (will be displayed popup window)
                var options3 = {processors : [{method : 'maxLength',
                                               validationValue: 1,
                                               messages : {'ru':'Happy birthday to you'}}],
                                errorFunction : "popup"
                               };

                var options4 = {errorFunction : "popup"};

                var optionsRange = ({processors : [{method : 'rangeLength',
                                                    validationValue : {'min':2,
                                                                       'max':4},
                                                    messages : {'en':'The number of the characters must be beetwen 2..4',
                                                                'ru':'Кол-во символов должно быть в пределах 2..4'}
                                                   }]
                                     });

                var optionsRadio = ({processors : [{method : 'required'}]});

                var optionsSelector = ({bindedElement   : dojo.query('#selector'),
                                        triggeredEvents : ['change'],
                                        processors : [{method : 'equal',
                                                       validationValue : 'yes'}]});

                var optionsRangeV = ({bindedElement   : dojo.query("#rangeValue"),
                                      triggeredEvents : ['blur'],
                                      processors : [{method : 'rangeValue',
                                                     validationValue : {'min':1990,
                                                                        'max':2000},
                                                     messages : {'en':'Enter value in the range 1990..2000',
                                                                 'ru':'Введите число в диапазоне 1990..2000'}
                                                    }]
                                      });

                 var optionsEmail = ({processors : [{method : 'email',
                                                     messages : {'en':'This email is not valid',
                                                                 'ru':'Введенный email не валиден'}
                                                   }]
                                      });

                //What fields we validate
                //And now these options will be applied to form elements
                validator.validate([
                    {element : dojo.query("#one"), options : options4},
                    {element : dojo.query("#two"),  options : options1},
                    {element : dojo.query("#two"),  options : options2},
                    {element : dojo.query("#three"),options : options3},
                    {element : dojo.query("#test")},
                    {element : dojo.query("#range"), options : optionsRange},
                    {element : dojo.query("#radiob"), options : optionsRadio},
                    {element : dojo.query("#selector"), options : optionsSelector},
                    {element : dojo.query("#rangeValue"), options : optionsRangeV},
                    {element : dojo.query("#email"), options : optionsEmail}
                ]);
            });
        </script>
        

    </head>
    <body class="tundra">
        <p><b>Валидатор форм. Плагин Dojo для стандартных элементов формы (не виджетов dojo)</b></p>
    
        <form id="forma" name="forma" method="post">

        Валидатор "notEmpty". Событие - submit формы.<br />
        <input id="one" type="text" name="field" value="" /><br /><br />

        Валидаторы "minLength, notEmpty, maxLength, regExp". Событие - onkeyup.
        А также валидатор maxLength для события - submit формы.<br />
        <input id="two" type="text" name="field2" value="" /><br /><br />

        Валидатор "maxLength". Событие - submit формы. Сообщение об ошибке в виде pop-up<br />
        <input id="three" type="text" name="field3" value="" /><br /><br />

        Валидатор "notEmpty". Событие - submit формы. Используются глобальные настройки плагина<br />
        <textarea id="test" cols="10" name="fieldTest" rows="5"></textarea><br /><br />

        Валидатор "rangeLength". Событие - submit формы.<br />
        <input id="range" type="text" name="range" /><br /><br />

        Валидатор "required". Событие - submit формы.<br />
        Поставьте галочку<br />
        <input type="checkbox" id="radiob" name="radiob" /><br /><br />

        Валидатор "equal". Событие - onchange селекта.<br />
        Вы часто опаздывает на работу?<br />
        <select id="selector" name="myselector">
            <option value="yes" />Да
            <option value="no" />Нет
            <option value="dontno" selected />Не знаю
        </select><br /><br />

        Валидатор "rangeValue". Событие - onBlur<br />
        <input id="rangeValue" type="text" name="rangeValue" /><br /><br />

        Валидатор "email". Событие - submit<br />
        <input id="email" type="text" name="email" /><br /><br />

        <input type="submit" />
        </form>

       <a href="" onclick="window.history.back();return false;">Назад</a>
    </body>

</html>
